<!--
 * @Author: thinkido 4077725@qq.com
 * @Date: 2022-07-07 18:59:49
 * @LastEditors: thinkido 4077725@qq.com
 * @LastEditTime: 2022-07-11 16:34:41
 * @FilePath: \vue3vite-framework\src\components\webApp\TMenu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    
    <!-- 导航栏 -->
    <van-tabbar route @change="tabChange(active)" v-model="active">
        <van-tabbar-item icon="home-o" name="index" to="/index">主页</van-tabbar-item>
        <van-tabbar-item icon="search" name="category" to="/category">书架</van-tabbar-item>
        <van-tabbar-item icon="friends-o" name="timeline" to="/timeline">朋友圈</van-tabbar-item>
        <van-tabbar-item icon="setting-o" name="mine" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name:'TMenu',
    data(){
        return {
            selectedMenu:'',
            active:'',
        };
    },
    computed:{
        // ...mapState('sys',{
        //     menu:state => state.menu.menu,
        // })
    },
    watch: {
        '$route.path': {
            handler(value){
                if (value.includes('index')) {
                    this.selectedMenu = '/index';
                } else {
                    this.selectedMenu = value;
                }
            },
            immediate: true
        }
    },
    methods:{        
        tabChange(active) {
            console.log("==active=====>", active);
            // 判断页面是否有访问权限，如果需要先登录流跳转到登录页面。登录完成后再跳转会该页面。
            // 简单的是显示一个登录按钮。


        }
    }
}
</script>

<style lang="scss">
    
</style>